<template>
	<view class="content">
		<uv-sticky>
			<view class="display-flex space-between align-items" style="background: #FFFFFF;">
				<view @tap="filterclick('new','')" :class="filter == 'new'?'tabs-active':'tabs'">
					最新发布
					<!--  最新发布 佣金率 佣金  价格 销量 -->
				</view>
				<view @tap="filterclick('sale_num','')" :class="filter == 'sale_num'?'tabs-active':'tabs'">
					七日销量
				</view>
				<view @tap="filterclick('rate','')" :class="filter == 'rate'?'tabs-active':'tabs'">
					<view class="">
						佣金率
					</view>
					<view class="margin-left-10">
						<uv-icon v-if="filter == 'rate' && sort == 'desc'" name="arrow-up-fill" color="red"
							size="8"></uv-icon>
						<uv-icon v-else name="arrow-up-fill" size="8"></uv-icon>
						<uv-icon v-if="filter == 'rate' && sort == 'asc'" name="arrow-down-fill" color="red"
							size="8"></uv-icon>
						<uv-icon v-else name="arrow-down-fill" size="8"></uv-icon>
					</view>
				</view>
				<view @tap="filterclick('price','')" :class="filter == 'price'?'tabs-active':'tabs'">
					<view class="">
						佣金
					</view>
					<view class="margin-left-10">
						<uv-icon v-if="filter == 'price' && sort == 'desc'" name="arrow-up-fill" color="red"
							size="8"></uv-icon>
						<uv-icon v-else name="arrow-up-fill" size="8"></uv-icon>
						<uv-icon v-if="filter == 'price' && sort == 'asc'" name="arrow-down-fill" color="red"
							size="8"></uv-icon>
						<uv-icon v-else name="arrow-down-fill" size="8"></uv-icon>
					</view>
				</view>
				<view @tap="filterclick('sale_price','')" :class="filter == 'sale_price'?'tabs-active':'tabs'">
					<view class="">
						价格
					</view>
					<view class="margin-left-10">
						<uv-icon v-if="filter == 'sale_price' && sort == 'desc'" name="arrow-up-fill" color="red"
							size="8"></uv-icon>
						<uv-icon v-else name="arrow-up-fill" size="8"></uv-icon>
						<uv-icon v-if="filter == 'sale_price' && sort == 'asc'" name="arrow-down-fill" color="red"
							size="8"></uv-icon>
						<uv-icon v-else name="arrow-down-fill" size="8"></uv-icon>
					</view>
				</view>
			</view>
		</uv-sticky>

		<view class="padding-about-24">
			<view v-for="item,index in goodslist" :key="index"
				@click="navigateTo('/pages/Home/goodsDetails/goodsDetails?id=' + item.product_id)"
				class="view margin-top-30 position-relative" style="overflow: hidden;">

				<view v-if="item.subsidy_price>0 && item.stock > 0"
					class=" label3 position-absolute display-flex align-items" style="top: 0; left: 0;">
					<view class="button color-FFF font-size-22"
						style="padding: 8rpx 20rpx;border-radius: 16rpx 0rpx 16rpx 0rpx;">
						爆品补贴
					</view>
					<view class="font-size-22 margin-left-20" style="color: #FA3110;">
						距离结束剩余
					</view>
					<view class="margin-left-20">
						<uv-count-down :time="item.end_time" format="DD天HH:mm:ss"></uv-count-down>
					</view>
				</view>
				<view class="" style="padding: 24rpx;">
					<view :class="item.subsidy_price>0 && item.stock > 0 ?'margin-top-40':''" class="display-flex ">
						<image :src="item.thumb_img" style="width: 220rpx;height: 220rpx; border-radius: 20rpx;"
							mode=""></image>
						<view class="file-1 display-flex flex-direction-column space-between margin-left-20">
							<view class="font-size-28 webkit-line-clamp" style="-webkit-line-clamp: 2;">
								{{item.title}}
							</view>
							<view class="">
								<view class="display-flex align-items">
									<view class="margin-top-10" style="color: #FF2E38;">
										<text class="font-size-24 font-weight-bold">￥</text>
										<text class=" font-size-36 font-weight-bold">{{item.sale_price}}</text>
									</view>
									<view v-if="item.subsidy_price>0 && item.stock > 0"
										class="font-size-22 margin-top-10 margin-left-20"
										style="background: #F6F6F6;padding: 3rpx 12rpx; color: #FD6C56;">
										剩余{{item.stock}}单补贴
									</view>
								</view>
								<!-- 	<view v-if="item.subsidy_price>0 && item.stock > 0" class="btn margin-top-15">
				
														</view> -->
								<view v-if="item.subsidy_price>0 && item.stock > 0"
									class="buttons position-relative display-flex space-between margin-top-20">
									<view class=""></view>
									<image :src="imgaeUrl('/static/home/btn.png')" style="width: 214rpx;height: 72rpx;" mode="">
									</image>
									<view class="position-absolute display-flex space-between align-items"
										style="width: 100%;height: 100%;top: 0;">
										<view style="width: 114rpx;height: 72rpx;"
											class="display-flex flex-direction-column  align-items">
											<view class="">
												<view style="color: #FF2E38;">
													<text class="font-size-20 font-weight-500">￥</text>
													<text class=" font-size-28 font-weight-bold">{{item.price}}</text>
												</view>
											</view>
											<view class="font-size-20 " style="color: #FF2E38;margin-top: -6rpx;">
												{{ item.plan_type == 1?'定向高佣':'预估佣金'}}
											</view>
										</view>
										<view class="font-size-36 font-weight-bold" style="color: #FF2E38;">
											+
										</view>
										<view style="width: 184rpx;height: 72rpx;"
											class="color-FFF display-flex flex-direction-column  align-items">
											<view class="">
												<view>
													<text class="font-size-20 font-weight-500">￥</text>
													<text
														class=" font-size-28 font-weight-bold">{{item.subsidy_price}}</text>
												</view>
											</view>
											<view class="font-size-20 " style="margin-top: -6rpx;">
												每单补贴
											</view>
										</view>
									</view>
								</view>
								<view v-else class="display-flex margin-top-15 align-items">
									<view style="width: 108rpx;font-size: 22rpx;height: 40rpx;"
										class="label center-size-20  color-FFF">
										{{ item.plan_type == 1?'定向高佣':'预估佣金'}}
									</view>
									<view
										style="color: #FF2E38;width: 100rpx;font-size: 22rpx; height: 40rpx;border: none;background: #FFEEEA;"
										class="label1 center-size-20">
										¥{{item.price}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="item.reason" class="display-flex align-items margin-top-20">
						<image :src="imgaeUrl('/static/home/dian.png')" style="width: 28rpx;height: 26.79rpx;" mode="">
						</image>
						<view class="font-size-22 file-1 margin-left-20" style="color: #B45F3E;">
							<text class="font-weight-500">推荐理由：</text>
							<text>{{item.reason}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<div class="kong"></div>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		imgaeUrl,
		nativeUI,
		navigateTo,
		navigateBack
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const keyword = ref('')
	const filter = ref('new')
	const goodslist = ref([])
	const page = ref(1)
	const sort = ref('')
	onLoad(function(option) {
		keyword.value = option.keywords
		getGoodslist()
	});
	onShow(function() {});

	function filterclick(filters) {
		console.log(filters);
		if (filters == 'new' || filters == 'sale_num') {
			filter.value = filters
		} else {
			if (filter.value == filters) {
				filter.value = filters
				sort.value = sort.value == '' ? 'desc' : sort.value == 'desc' ? 'asc' : 'desc'
			} else {
				sort.value = 'desc'
				filter.value = filters
			}
		}
		page.value = 1
		goodslist.value = []
		getGoodslist()
	}
	/** 获取热门视频*/
	async function getGoodslist() {
		let object = {
			page: page.value,
			title: keyword.value,
			is_hot: 0,
			filter: filter.value,
			// cid: cid.value,
			sort: sort.value
		}
		const {
			code,
			data
		} = await api.getGoodslist(object)
		if (code == 0) {
			page.value = data.lastId
			goodslist.value = goodslist.value.concat(data.lists)
		}
	}
	onReady(function() {});
	onReachBottom(function() {
		getGoodslist()
	});
</script>

<style scoped lang="scss">
	.label3 {
		// width: 432rpx;
		height: 48rpx;
		background: linear-gradient(90deg, #FEF1F0 0%, #FFFFFF 100%);
	}

	.label2 {
		width: 152rpx;
		height: 40rpx;
		background: #F6F6F6;
		border-radius: 0rpx 24rpx 0rpx 12rpx;
	}

	.label1 {
		width: 68rpx;
		height: 28rpx;
		background: #FFFFFF;
		border-radius: 0rpx 6rpx 6rpx 0rpx;
		border: 2rpx solid #FE683F;

	}

	.center-size-20 {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
	}

	.label {
		width: 80rpx;
		height: 32rpx;
		background: linear-gradient(270deg, #FE6740 0%, #FE8B1D 100%);
		border-radius: 6rpx 0 0 6rpx;
	}

	.tabs,
	.tabs-active {
		padding: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		border-radius: 8rpx;
	}

	.tabs-active {
		color: #FF351B;
	}

	.view {
		background: #FFFFFF;
		border-radius: 24rpx;
	}

	.tabs {
		color: #7C7C7C;
	}
</style>